<template>
    <div class="Lists">
        <div class="regist-wrap" v-if="emptyDataShow">
            <img src="../../assets/images/emptyData.png" alt="">
            <div class="addDeviceBtn" @click="goAddDevice">立即添加</div>
        </div>
        <div v-else class="list-wrap">
            <div class="list-title" v-if="listsArray">
                <span class="mr">共计</span> {{listsArray.length}} 个
                <img @click="goAddDevice" src="../../assets/images/addBtn.png" alt="">
            </div>
            <div class="list-content">
                <ul>
                    <li v-for="(item,index) in listsArray" :key="index" @click="goLine(item)">
                        <p><span class="mr">设备名称</span> {{item.nickname}}</p>
                        <p><span class="mr">瞬间流量</span> {{item.latest_flow}} <span class="addDate">{{item.latest_measure_time}}</span></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import wx from 'weixin-js-sdk'
    import { lists as listUrl, register as registerUrl } from '../../code/api'
    export default {
        data() {
            return {
                name: 'lists',
                listsArray: null,
                emptyDataShow: false
            }
        },
        created() {
            let that = this
            console.log('lists')
            console.log(sessionStorage.getItem('user_token'))
            let option = {
                user_token: sessionStorage.getItem('user_token')
            }
            this.$http.post(listUrl, option).then((res) => {
                console.log(res)
                this.listsArray = res.body
                if (this.listsArray.length == 0) {
                    this.emptyDataShow = true
                } else {
                    this.emptyDataShow = false
                }
                // setInterval(function () {
                //     that.$http.post(listUrl, option).then((res) => {
                //         console.log(res)
                //         that.test++
                //         that.listsArray = res.body
                //     })
                // }, 3000)
            }, error => {
            })

        },
        methods: {
            goLine(ev) {
                this.$router.push({ name: 'lineChart', params: ev })
            },
            goAddDevice() {
                this.$router.push('/addDevice')
            }
        }
    }

</script>
<style>
    .Lists {
        background: #fff;
        padding-left: 30px;
        box-sizing: border-box;
    }

    .Lists span {
        color: #cdcdcd;
    }

    .Lists .mr {
        margin-right: 20px;
    }

    .list-title {
        border-bottom: 1px solid #cdcdcd;
        min-height: 60px;
        line-height: 100px;
        position: relative;
        box-sizing: border-box;
    }

    .list-title img {
        width: 157px;
        height: 55px;
        cursor: pointer;
        position: absolute;
        right: 30px;
        top: 20.5%;
    }

    .list-content p {
        line-height: 50px;
        position: relative;
    }

    .list-content li {
        padding: 20px 0;
    }

    .list-content li:not(:last-child) {
        border-bottom: 1px solid #cdcdcd;
    }

    .list-content .addDate {
        position: absolute;
        right: 30px;
        bottom: 0;
    }
    /* 空白页 */

    .regist-wrap {
        width: 700px;
        margin: 0 auto;
        padding-top: 80px;
    }

    .regist-wrap img {
        display: block;
        width: 396px;
        height: 384px;
        margin: 0px auto;
    }

    .addDeviceBtn {
        padding: 20px 0;
        background: #afceaa;
        width: 90%;
        margin: 50px auto;
        text-align: center;
        color: #fff;
        border-radius: 10px;
    }

    .addDeviceBtn:hover {
        background: #fcebab;
    }
</style>